<template>
    <view class="content">
        <view class="h-130 flex items-center px-20">
            <uv-input prefix-icon="search" prefix-icon-style="color:#9078e8" shape="circle" border="none"
                placeholder="搜索你感兴趣的测评"
                :customStyle='{background:"#f6f8fa",height:"60rpx",padding:"10rpx 20rpx"}'></uv-input>
        </view>
        <uv-vtabs :chain="false" hdHeight="130rpx" :list="list" @change="change"
            :barItemActiveLineStyle="{background:'#fff'}"
            :bar-item-active-style="{color:'#000',fontWeight:'bold'}"><!-- :bar-style="{borderTopRightRadius:'20rpx'}" -->
            <uv-vtabs-item>
                <view class="flex justify-end">
                    <view class="w-280 mb-25">
                        <uv-subsection custom-style="height: 60rpx;border-radius: 30rpx;" bgColor="#f6f8fa"
                            custom-item-style="border-radius: 30rpx;background:#ebe9f0" activeColor="#000"
                            inactiveColor="#9196a1" :current="current" :list="['综合','最新','人气']"
                            @change="sort"></uv-subsection>
                    </view>
                </view>
                <view class="item px-20 mb-25 flex" v-for="(item,index) in list2" :key="index" @click="toDetail">
                    <view class="inline-block">
                        <uv-image width="120rpx" height="120rpx" :src="item.cover"></uv-image>
                    </view>
                    <view class="item__info flex justify-between flex-col">
                        <view>
                            <view class="fw-600 fs-28 text-hidden-1 ">{{item.name}}
                            </view>
                            <view class="fs-22 c-cccccc text-hidden-1">{{item.desc}}</view>
                        </view>
                        <view class="fs-22 c-cccccc flex justify-between">
                            <view>
                                <Price :current="18.8" :original="21" />
                            </view>
                            <view>
                                <uv-button size="mini" color="#8772e6" text="去测评" shape="circle"
                                    :customStyle="{color:'#fff'}"></uv-button>
                            </view>
                        </view>
                    </view>
                </view>
            </uv-vtabs-item>
        </uv-vtabs>
    </view>
</template>
<script lang="ts" setup>
    import Price from "@/components/Price.vue";
    import { computed, ref } from 'vue';
    let value = ref(0);
    let current = ref(0);
    const list2 = computed(() => {
        const _list = list.value[value.value]?.childrens;
        return _list ? _list : [];
    })
    const change = (e) => {
        value.value = e;
    }
    const sort = (e) => {
        current.value = e;
    }
    const toDetail = () => {
        uni.navigateTo({
            url: "/pages/task/detail"
        })
    }
    const list = ref([
        {

            name: "全部", childrens: [{
                name: "MBTI性格类型测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 20
            }, {
                name: "五大人格特质测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 0
            }]

        }, {

            name: "免费", childrens: [{
                name: "五大人格特质测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 0
            }, {
                name: "MBTI性格类型测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 20
            }]

        }, {
            name: "人格测试", childrens: [{
                name: "五大人格特质测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 0
            }, {
                name: "MBTI性格类型测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 20
            }]
        }, {
            name: "心理健康", childrens: [{
                name: "五大人格特质测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 0
            }, {
                name: "MBTI性格类型测评",
                cover: "",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 20
            }]
        }, {
            name: "情绪测验", childrens: [{
                name: "五大人格特质测评",
                cover: "",
                desc: "探索你的性格类型，了解行为模式与职业倾向",
                price: 0
            }, {
                name: "MBTI性格类型测评",
                cover: "/static/logo.png",
                desc: "探索你的性格类型，了解行为模式与职业倾向2",
                price: 20
            }]
        }
    ]);
</script>
<style lang="scss" scoped>
    .item {
        word-break: break-all;
        // word-wrap: break-word;
        // width: calc(100% - 180rpx);

        box-sizing: border-box;

        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        &__info {
            margin-left: 20rpx;
            width: calc(100vw - 180rpx - 120rpx - 60rpx);
        }

    }

    // ::v-deep .uv-vtabs__bar-item-active+view {
    //     border-top-right-radius: 20rpx;
    //     border: 1px #000 solid;
    // }

    // ::v-deep view:has(+ .uv-vtabs__bar-item-active) {
    //     border: 1px #000 solid;
    // }
</style>